<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进程网络监控 - 网络监控仪表盘</title>
    <link rel="stylesheet" href="/static/styles.css">
    <link rel="stylesheet" href="/static/process-monitor.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h1 style="margin: 0;">进程网络监控</h1>
                <nav class="nav-menu">
                    <a href="/" class="nav-link">🏠 网络监控</a>
                    <a href="/process-monitor" class="nav-link active">🔍 进程监控</a>
                </nav>
            </div>
            <div class="info">
                <span>主机: {{.Hostname}}</span> | 
                <span>地址: {{.Ipv4}}</span> | 
                <span>更新时间: <span id="update-time">加载中...</span></span>

            </div>
        </div>

        <div class="summary-cards">
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">🔍</div>
                    <div class="card-details">
                        <div class="card-title">监控进程</div>
                        <div class="card-value" id="monitored-processes">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">🔗</div>
                    <div class="card-details">
                        <div class="card-title">总连接数</div>
                        <div class="card-value" id="total-connections">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">📊</div>
                    <div class="card-details">
                        <div class="card-title">TCP连接</div>
                        <div class="card-value" id="tcp-connections">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">📡</div>
                    <div class="card-details">
                        <div class="card-title">UDP连接</div>
                        <div class="card-value" id="udp-connections">-</div>
                        <div class="card-label">个</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">⚡</div>
                    <div class="card-details">
                        <div class="card-title">总上传速率</div>
                        <div class="card-value" id="total-upload-speed">-</div>
                        <div class="card-label">B/s</div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-content">
                    <div class="card-icon">⬇️</div>
                    <div class="card-details">
                        <div class="card-title">总下载速率</div>
                        <div class="card-value" id="total-download-speed">-</div>
                        <div class="card-label">B/s</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls-panel">
            <div class="filter-section">
                <label>
                    <input type="checkbox" id="show-listening"> 显示监听端口
                </label>
                <label>
                    <input type="checkbox" id="show-established" checked> 显示已建立连接
                </label>
                <label>
                    过滤进程: 
                    <input type="text" id="process-filter" placeholder="输入进程名或PID">
                </label>
                <label>
                    过滤端口: 
                    <input type="text" id="port-filter" placeholder="输入端口号">
                </label>
            </div>
        </div>

        <div class="process-tabs">
            <button class="tab-button active" data-tab="connections">网络连接</button>
            <button class="tab-button" data-tab="processes">进程列表</button>
        </div>

        <div class="tab-content active" id="connections-tab">
            <div class="table-container">
                <table class="process-table">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="process_name">进程名 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="pid">PID <span class="sort-icon"></span></th>
                            <th>协议</th>
                            <th>本地地址</th>
                            <th>远程地址</th>
                            <th>状态</th>
                            <th class="sortable" data-sort="bytes_sent">发送字节 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="bytes_recv">接收字节 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="speed_up">上传速率 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="speed_down">下载速率 <span class="sort-icon"></span></th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="connections-tbody">
                        <tr>
                            <td colspan="11" class="loading">正在加载连接数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 连接分页控件 -->
            <div class="pagination-container" id="connections-pagination">
                <div class="pagination-info">
                    <span>共 <span id="connections-total">0</span> 条记录</span>
                    <span>每页显示 
                        <select id="connections-page-size" class="page-size-select">
                            <option value="10">10</option>
                            <option value="20" selected>20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select> 条
                    </span>
                </div>
                <div class="pagination-controls">
                    <button id="connections-first-page" class="pagination-btn">首页</button>
                    <button id="connections-prev-page" class="pagination-btn">上一页</button>
                    <span class="pagination-info">
                        第 <span id="connections-current-page">1</span> 页，共 <span id="connections-total-pages">1</span> 页
                    </span>
                    <button id="connections-next-page" class="pagination-btn">下一页</button>
                    <button id="connections-last-page" class="pagination-btn">末页</button>
                </div>
            </div>
        </div>

        <div class="tab-content" id="processes-tab">
            <div class="table-container">
                <table class="process-table">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="process_name">进程名 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="pid">PID <span class="sort-icon"></span></th>
                            <th>用户</th>
                            <th class="sortable" data-sort="total_connections">连接数 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="active_tcp">TCP连接 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="active_udp">UDP连接 <span class="sort-icon"></span></th>
                            <th>监听端口</th>
                            <th class="sortable" data-sort="total_sent">总发送 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="total_recv">总接收 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="speed_up">上传速率 <span class="sort-icon"></span></th>
                            <th class="sortable" data-sort="speed_down">下载速率 <span class="sort-icon"></span></th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="processes-tbody">
                        <tr>
                            <td colspan="12" class="loading">正在加载进程数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 进程分页控件 -->
            <div class="pagination-container" id="processes-pagination">
                <div class="pagination-info">
                    <span>共 <span id="processes-total">0</span> 条记录</span>
                    <span>每页显示 
                        <select id="processes-page-size" class="page-size-select">
                            <option value="10">10</option>
                            <option value="20" selected>20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select> 条
                    </span>
                </div>
                <div class="pagination-controls">
                    <button id="processes-first-page" class="pagination-btn">首页</button>
                    <button id="processes-prev-page" class="pagination-btn">上一页</button>
                    <span class="pagination-info">
                        第 <span id="processes-current-page">1</span> 页，共 <span id="processes-total-pages">1</span> 页
                    </span>
                    <button id="processes-next-page" class="pagination-btn">下一页</button>
                    <button id="processes-last-page" class="pagination-btn">末页</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="process-detail-modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3>进程详情</h3>
            <div id="process-detail-content">
                <!-- 动态加载进程详情 -->
            </div>
        </div>
    </div>

    <footer style="text-align: center; margin-top: 40px; padding: 20px; color: white; opacity: 0.8;">
        <small><a href="https://gitee.com/liumou_site/go-network-monitoring" target="_blank" style="color: white; text-decoration: none;">
        Go网络监控 v{{.Version}}</a> - 进程网络监控工具</small>
    </footer>

    <!-- API客户端文件 -->
    <script src="/static/page-api.js"></script>
    <script src="/static/process-api.js"></script>
    <script src="/static/sse-api.js"></script>
    
    <!-- 分页管理器 -->
    <script src="/static/pagination.js"></script>
    
    <!-- 进程监控模块 -->
    <script src="/static/process-sorter.js"></script>
    <script src="/static/process-renderer.js"></script>
    <script src="/static/process-events.js"></script>
    
    <!-- 主应用逻辑 -->
    <script src="/static/process-monitor.js"></script>
</body>
</html>